<template>
  <div class="demo-container">
    <h2>CrudSearchForm 组件示例</h2>

    <div class="tips">
      <p>💡 提示：在输入框中输入内容后按 <kbd>Enter</kbd> 键即可触发搜索</p>
    </div>

    <!-- 示例1: 基础使用 - Input -->
    <div class="demo-section">
      <h3>示例1: Input 类型</h3>
      <CrudSearchForm v-model="searchParams1" :fields="searchFields1" @search="handleSearch1" @reset="handleReset1" />
      <div class="result">
        搜索参数: {{ JSON.stringify(searchParams1) }}
      </div>
    </div>

    <!-- 示例2: Select 类型 -->
    <div class="demo-section">
      <h3>示例2: Select 类型</h3>
      <CrudSearchForm v-model="searchParams2" :fields="searchFields2" @search="handleSearch2" @reset="handleReset2" />
      <div class="result">
        搜索参数: {{ JSON.stringify(searchParams2) }}
      </div>
    </div>

    <!-- 示例3: Date 类型 -->
    <div class="demo-section">
      <h3>示例3: Date 类型</h3>
      <CrudSearchForm v-model="searchParams3" :fields="searchFields3" @search="handleSearch3" @reset="handleReset3" />
      <div class="result">
        搜索参数: {{ JSON.stringify(searchParams3) }}
      </div>
    </div>

    <!-- 示例4: 混合类型 -->
    <div class="demo-section">
      <h3>示例4: 混合类型 (Input + Select + Date)</h3>
      <CrudSearchForm v-model="searchParams4" :fields="searchFields4" search-text="查询" reset-text="清空"
        @search="handleSearch4" @reset="handleReset4" />
      <div class="result">
        搜索参数: {{ JSON.stringify(searchParams4) }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import CrudSearchForm from './index.vue'
import type { SearchField } from './index.vue'

// 示例1: Input类型
const searchParams1 = reactive({
  username: '',
  name: ''
})

const searchFields1: SearchField[] = [
  {
    prop: 'username',
    label: '用户名',
    type: 'input',
    placeholder: '请输入用户名'
  },
  {
    prop: 'name',
    label: '姓名',
    type: 'input',
    placeholder: '请输入姓名'
  }
]

const handleSearch1 = () => {
  ElMessage.success('搜索参数: ' + JSON.stringify(searchParams1))
}

const handleReset1 = () => {
  ElMessage.info('已重置')
}

// 示例2: Select类型
const searchParams2 = reactive({
  status: '',
  role: ''
})

const searchFields2: SearchField[] = [
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 }
    ]
  },
  {
    prop: 'role',
    label: '角色',
    type: 'select',
    options: [
      { label: '管理员', value: 'admin' },
      { label: '普通用户', value: 'user' },
      { label: '访客', value: 'guest' }
    ]
  }
]

const handleSearch2 = () => {
  ElMessage.success('搜索参数: ' + JSON.stringify(searchParams2))
}

const handleReset2 = () => {
  ElMessage.info('已重置')
}

// 示例3: Date类型
const searchParams3 = reactive({
  createDate: '',
  dateRange: ''
})

const searchFields3: SearchField[] = [
  {
    prop: 'createDate',
    label: '创建日期',
    type: 'date',
    dateType: 'date'
  },
  {
    prop: 'dateRange',
    label: '日期范围',
    type: 'date',
    dateType: 'daterange'
  }
]

const handleSearch3 = () => {
  ElMessage.success('搜索参数: ' + JSON.stringify(searchParams3))
}

const handleReset3 = () => {
  ElMessage.info('已重置')
}

// 示例4: 混合类型
const searchParams4 = reactive({
  keyword: '',
  status: '',
  createDate: ''
})

const searchFields4: SearchField[] = [
  {
    prop: 'keyword',
    label: '关键词',
    type: 'input',
    placeholder: '请输入关键词'
  },
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '全部', value: '' },
      { label: '待处理', value: 'pending' },
      { label: '已完成', value: 'completed' },
      { label: '已取消', value: 'cancelled' }
    ]
  },
  {
    prop: 'createDate',
    label: '创建日期',
    type: 'date',
    dateType: 'date'
  }
]

const handleSearch4 = () => {
  ElMessage.success('搜索参数: ' + JSON.stringify(searchParams4))
}

const handleReset4 = () => {
  ElMessage.info('已重置')
}
</script>

<style scoped lang="scss">
.demo-container {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    color: #333;
  }

  .tips {
    margin-bottom: 30px;
    padding: 15px 20px;
    background-color: #e8f4fd;
    border-left: 4px solid #409eff;
    border-radius: 4px;

    p {
      margin: 0;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }

    kbd {
      display: inline-block;
      padding: 2px 6px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
      font-family: monospace;
      font-size: 12px;
      font-weight: bold;
    }
  }

  .demo-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;

    h3 {
      margin-bottom: 20px;
      color: #666;
      font-size: 16px;
    }

    .result {
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border-radius: 6px;
      border: 1px solid #e0e0e0;
      color: #666;
      font-family: monospace;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .demo-container {
    h2 {
      color: #e0e0e0;
    }

    .tips {
      background-color: #1a3a52;
      border-left-color: #66b1ff;

      p {
        color: #b0b0b0;
      }

      kbd {
        background-color: #2c2c2c;
        border-color: #404040;
        color: #e0e0e0;
      }
    }

    .demo-section {
      background-color: #2c2c2c;
      border-color: #404040;

      h3 {
        color: #b0b0b0;
      }

      .result {
        background-color: #1a1a1a;
        border-color: #404040;
        color: #b0b0b0;
      }
    }
  }
}
</style>
